import 'package:flutter/material.dart';

/**
 * @Description: 自定义 搜素框
 * @Author: 下雨了
 * @CreateDate: 2022-02-14 15:30
 * @UpdateUser: 更新者
 * @UpdateDate:  2022-02-14 15:30
 * @UpdateRemark: 更新说明
 * @Version: 1.0
 */
class CustomSearch extends StatefulWidget {
  // 提示语
  final String hintLabel;

  const CustomSearch({Key? key, required this.hintLabel}) : super(key: key);

  @override
  _CustomSearchState createState() => _CustomSearchState();
}

class _CustomSearchState extends State<CustomSearch> {
  late FocusNode _focusNode;

  ///默认不展示控件
  bool _offstage = true;

  ///监听TextField内容变化
  final TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();
    _textEditingController.addListener(() {
      var isVisible = _textEditingController.text.isNotEmpty;
      _updateDelIconVisible(isVisible);
    });
  }

  _updateDelIconVisible(bool isVisible) {
    setState(() {
      _offstage = !isVisible;
    });
  }


  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 45,
      child: Row(
        children: [
          Expanded(
            flex: 1,
            child: Container(
              height: double.infinity,
              margin: const EdgeInsets.only(left: 16),
              decoration: BoxDecoration(
                  color: const Color(0xffF5F6FA), borderRadius: BorderRadius.circular(4)),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const SizedBox(width: 8),
                  const Icon(Icons.search, size: 20,),
                  const SizedBox(width: 8),
                  Expanded(
                    flex: 1,
                    child: TextField(
                      controller: _textEditingController,
                      autofocus: false,
                      focusNode: _focusNode,
                      style: const TextStyle(fontSize: 15, color: Color(0xFF333333)),
                      decoration: InputDecoration(
                        hintText: widget.hintLabel,
                        // 去除内边距
                        contentPadding: EdgeInsets.zero,
                        // 去掉底部下划线
                        border: InputBorder.none,
                      ),
                      maxLines: 1,
                    ),
                  ),
                  const SizedBox(width: 8),
                  Offstage(
                    offstage: _offstage,
                    child: GestureDetector(
                      onTap: () => {_textEditingController.clear()},
                      child: const Icon(Icons.cancel, size: 20,),
                    ),
                  ),
                  const SizedBox(width: 8),
                ],
              ),
            ),
          ),
          InkWell(
            onTap: () {
              _focusNode.unfocus();
            },
            child: Container(
              padding: const EdgeInsets.only(left: 16, right: 16, top: 8, bottom: 8),
              child: const Text("搜索",  style: TextStyle(fontSize: 15, color: Color(0xFF333333))),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _focusNode.unfocus();
  }
}
